<template>
  <div>
      <div class=bg>
          <!-- <img src="../../assets/beijing.png" alt=""> -->
       
      <!-- <h2>注册</h2> -->
      <van-form @submit="onSubmit">
          
        <div class="register">
            <van-field
            v-model="username"
            type="username"
            name="username"
            label="账号"
            placeholder="账号"
            :rules="rules.username"
            />
            <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="rules.password"
            />
            <van-field
            v-model="repass"
            type="password"
            name="repass"
            label="确认密码"
            placeholder="确认密码"
            :rules="rules.repass"
            />
            <van-field
            v-model="tel"
            type="number"
            name="tel"
            label="手机号"
            placeholder="手机号"
            :rules="rules.tel"
            />
            <van-field
            v-model="email"
            type="email"
            name="email"
            label="邮箱"
            placeholder="邮箱"
            :rules="rules.email"
            />
            <van-field
            v-model="nickname"
            type="text"
            name="nickname"
            label="昵称"
            placeholder="昵称"
            :rules="rules.nickname"
            />
        </div>
        <div class="bt">
          <van-button round block type="info" 
          native-type="submit">注册</van-button>
        </div>
        <div class="bt">
          <van-button round block type="info" 
          native-type="submit" @click="reset">重置</van-button>
        </div>
      </van-form>
      <div class="tologin">
        已有账号，去<router-link to="/my/login">登录</router-link>
      </div>
      </div>
    </div>
    
  
</template>

<script>
import Vue from "vue";
import { Form } from "vant";
import { Field } from "vant";
import { register } from '@/request';
import { Toast } from 'vant';


Vue.use(Toast);
Vue.use(Form);
Vue.use(Field);
export default {
  data () { 
    return { 
        rules: { 
            username: [ 
            { 
                required: true, 
                message: '账号必填' 
            },
            { 
                pattern: /^[a-zA-Z]\w{3,9}$/, 
                message: '必须字母开头，数字字母下划线组成，4~10位' 
            }
        ],
            password: [ 
            { 
                required: true, 
                message: '密码必填' 
            },
            { 
                pattern: /^.{6,12}$/, 
                message: '长度在6~12位' 
            }, 
        ],
            repass: [ 
                { 
                    required: true, 
                    message: '确认密码必填' 
                },
                {   validator: this.validator, 
                    message: '两次密码输入不一致' 
                } 
        ],
            tel: [
                { 
                    required: true, 
                    message: '电话必填' 
                },
                { 
                    pattern: /^1[345789]\d{9}$/, 
                    message: '请输入正确的手机号' 
                } 
        ],  email: [ 
                { 
                    required: true, 
                    message: '请填写邮箱' 
                },
                {   
                    pattern: /(^[1-9]\d{4,9}@qq\.com$)|(^[a-zA-Z]\w{5,17}@((126|163)\.com|yeah\.net)$)/,
                    message: '请输入正确的邮箱地址' 
                } 
        ],
            nickname: [ 
                { 
                    required: true, 
                    message: '昵称必填' 
                },
                { 
                    pattern: /^[a-zA-Z][a-zA-Z0-9]{3,7}$/, 
                    message: '昵称字母和数字组成，字母开头，4~8位' 
                } 
            ] 
        },
            username: '', 
            password: '', 
            repass: '', 
            email: '', 
            tel: '', 
            nickname: '' 
        } 
    },
    methods: { 
        onSubmit(values) { 
            var _this = this
            // console.log('submit', values); 
            delete values.repass
            register(values).then(data => {
                var {code,msg} = data
                if(code === 1){
                    Toast.fail(msg);
                }
                else{
                    Toast.success({
                        message: msg,
                        onClose() {
                            _this.$router.push('/my/login')
                        }
                    });
                }
            })
        },
        //重置按钮
        reset(){
            console.log(this)
            this.username=null;
            this.password=null;
            this.repass=null;
            this.tel=null;
            this.email=null;
            this.nickname=null;
        },
        validator(val) { 
            // 在这里进行验证，返回true表示通过，返回false表示不通过 
        return this.password === this.repass 
            } 
        },
        
    }

</script>

<style scoped>
.bg{
    background-size:100% 100%;
    background-image: url('../../assets/bg.jpg');
    height: 100vh;
    width: 100%;
}
.van-form{
    position: absolute;
    top:140px;
    height: 270px;
    width: 370px;
    border-radius: 50px;
    left:50px;
    
}
.tologin{
    position: absolute;
    left: 60%;
    top: 70%;
}
.van-field{
    height: 68px;
    width: 380px;
}
.register{
    position:relative;
    left: 8%;
    top: 10%;
    background-color: rgb(4, 110, 75);
    height: 408px;
    width: 380px;
    box-shadow: 0px 0px 5px 6px rgba(205, 172, 62, 0.755);
    background-color:#dda235;
}
.bt{
    margin: 16px;
    position:relative;
    left: 8%;
    top: 25%;
}

</style>